<script setup>
import { ref } from 'vue'

const collectionData = [
  { name: '基础信息', value: 4521, percentage: 85 },
  { name: '经营信息', value: 3892, percentage: 75 },
  { name: '信用记录', value: 3256, percentage: 65 },
  { name: '监管信息', value: 2458, percentage: 55 }
]

const chartRef = ref(null)
</script>
<template>
  <div class="chart-card">
    <div class="chart-header">
      <div class="header-title">
        <i class="fas fa-database"></i>
        信用信息归集占比
      </div>
      <div class="chart-actions">
        <div class="total-count">
          <i class="fas fa-list-ul"></i>
          总计: <span class="count-value">15,693</span> 条
        </div>
      </div>
    </div>
    <div class="chart-content">
      <div class="chart-wrapper" ref="chartRef"></div>
      <div class="metrics-wrapper">
        <div class="collection-metrics">
          <div class="metric-item" v-for="(item, index) in collectionData" :key="index">
            <div class="metric-name">{{ item.name }}</div>
            <div class="metric-bar">
              <div class="bar-fill" :style="{ width: `${item.percentage}%` }"></div>
              <span class="bar-value">{{ item.value }}</span>
            </div>
            <div class="metric-percent">{{ item.percentage }}%</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.chart-card {
  background: rgba(0, 20, 60, 0.7);
  border: none;
  border-radius: 0;
  padding: 0;
  height: 100%;
  position: relative;
  overflow: visible;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
      transparent,
      #0ff,
      transparent
    );
  }

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg,
      #0ff,
      transparent
    );
  }
}

.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 12px 20px;
  background: rgba(0, 150, 255, 0.1);
  position: relative;
  border-bottom: 1px solid rgba(0, 255, 255, 0.2);
  
  &::before {
    content: '》';
    color: #0ff;
    font-family: monospace;
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
  }
  
  .header-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #0ff;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
    
    i {
      color: #0ff;
      font-size: 14px;
      filter: drop-shadow(0 0 5px rgba(0, 255, 255, 0.5));
    }
  }
}

.total-count {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #0ff;
  background: rgba(0, 255, 255, 0.1);
  padding: 4px 12px;
  position: relative;
  clip-path: polygon(
    10px 0,
    100% 0,
    100% 100%,
    0 100%,
    0 10px
  );
  
  i {
    color: #0ff;
    font-size: 12px;
  }
  
  .count-value {
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
  }
}

.metrics-wrapper {
  background: transparent;
  border-radius: 0;
  padding: 20px;
  border: none;
  position: relative;
  
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg,
      transparent,
      #0ff
    );
  }
}

.collection-metrics {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.metric-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: rgba(0, 150, 255, 0.05);
  border: 1px solid rgba(0, 255, 255, 0.1);
  position: relative;
  clip-path: polygon(
    0 0,
    calc(100% - 10px) 0,
    100% 10px,
    100% 100%,
    10px 100%,
    0 calc(100% - 10px)
  );
  
  &:hover {
    background: rgba(0, 150, 255, 0.1);
    border-color: rgba(0, 255, 255, 0.2);
    
    .bar-fill {
      background: linear-gradient(90deg, 
        rgba(0, 255, 255, 0.3),
        rgba(0, 150, 255, 0.1)
      );
    }
  }
}

.metric-name {
  width: 80px;
  color: #fff;
  font-size: 13px;
  white-space: nowrap;
  font-weight: normal;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.3);
}

.metric-bar {
  flex: 1;
  height: 24px;
  background: rgba(0, 150, 255, 0.1);
  border-radius: 2px;
  border: 1px solid rgba(0, 255, 255, 0.2);
  overflow: hidden;
  
  .bar-fill {
    height: 100%;
    background: linear-gradient(90deg,
      rgba(0, 255, 255, 0.2),
      rgba(0, 150, 255, 0.1)
    );
    transition: all 0.3s ease;
  }
  
  .bar-value {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 13px;
    font-family: 'JetBrains Mono', monospace;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
  }
}

.metric-percent {
  width: 60px;
  color: #0ff;
  font-size: 13px;
  font-family: 'JetBrains Mono', monospace;
  text-align: right;
  font-weight: normal;
  text-shadow: 0 0 8px rgba(0, 255, 255, 0.3);
}

.chart-content {
  height: calc(100% - 45px);
  display: flex;
  flex-direction: column;
}

@media (max-width: 1600px) {
  .chart-header {
    padding: 10px 16px;
  }
  
  .metrics-wrapper {
    padding: 16px;
  }
  
  .metric-item {
    padding: 10px 14px;
  }
}

@media (max-width: 1366px) {
  .chart-header {
    padding: 8px 14px;
  }
  
  .metrics-wrapper {
    padding: 14px;
  }
  
  .metric-item {
    padding: 8px 12px;
  }
}
</style> 